<template>
  <el-dialog
    title="查阅试题"
    width="70%"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <hr
      style="
        width: 100%;
        margin-left: -2px;
        background-color: #ccc;
        height: 0.2px;
        border: none;
      "
    />
    <br />
    <el-table
      border
      empty-text="快去选择题目吧！"
      :data="resultQuestData"
      style="width: 100%"
      header-align="center"
    >
      <el-table-column label="试题内容" width="933">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="2"> ID: {{ scope.row.id }}</el-col>
            <el-col :span="16">
              题干信息:
              <span
                id="color"
                @click="lookFn(scope.row)"
                v-html="scope.row.question.slice(0, 40)"
                style="margin-left: 10px"
              ></span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5"> 归属学科: {{ scope.row.subject_name }} </el-col>
            <el-col :span="5"> 归属目录:{{ scope.row.directory_name }} </el-col>
            <el-col :span="5"
              >标签信息:
              <span v-for="(item, index) in scope.row.tag_info" :key="index">{{
                item
              }}</span>
            </el-col>
            <el-col :span="4"
              >发布状态:
              <el-tag type="success" size="mini">{{
                scope.row.show_state === 1 ? "上架" : "下架"
              }}</el-tag>
            </el-col>
            <el-col :span="4"
              >发布时间: {{ scope.row.check_time.split(" ")[0] }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delFn(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <br />
    <lookQuestionInfo ref="lookQuestionRef" :singleQuest="singleQuest" />
  </el-dialog>
</template>

<script>
import lookQuestionInfo from "./lookQuestInfo.vue";
export default {
  name: "checkPaper",
  props: {
    resultQuestData: {
      type: Array,
      required: true,
    },
    quest_type: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      singleQuest: {},
    };
  },
  components: { lookQuestionInfo },
  methods: {
    handleClose(done) {
      // 通知父组件更新数据  个数 和 选择的 id 数据  还剩几个数据 thsi.resultData.length  剩余的 id  数组
      const arr = this.resultQuestData.map((item) => {
        return item.id;
      });
      this.$emit("notify", this.resultQuestData.length, arr, this.quest_type);
      this.dialogVisible = false;
    },
    delFn(id) {
      // 得到 id 去通知父组件删除数据
      const idx = this.resultQuestData.findIndex((item) => item.id === id);
      //   this.resultQuestData.splice(idx, 1);   // 子组件不能直接删除
      // 通知父组件删除数据
      this.$emit("delData", idx, this.quest_type);
    },
    lookFn(row) {
      this.singleQuest = row;
      this.$refs.lookQuestionRef.dialogVisible = true;
    },
  },
};
</script>


<style scope>
#color {
  color: #409eff;
}
#color:hover {
  color: aqua;
}
P {
  display: inline;
}
.el-dialog__body {
  padding: 0 20px !important;
}
</style>